<template>
	<div class="stand">
		<div class="stand-left">
			<div class="item hovering" v-for="(item,index) in stand" :key="index">
				<span class="text" v-if="index<161"><span class="icon-box"><Icon type="logo"/></span>动画{{index}}</span>
				<span class="num" v-if="index<161">{{item}}</span>
			</div>
		</div>
		<div class="stand-right">
			<div class="item hovering" v-for="(item,index) in list" :key="index">
				<span class="text"><span class="icon-box"><Icon type="logo"/></span>{{item}}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	data(){
		return{
			list: ['专栏', '直播', '活动', '课堂', '小黑屋', '音乐PLUS']
		}
	},
	computed:{
		stand(){
			return this.$store.state.pops.stand;
		}
	},
	mounted(){
		let params = {
			where: 'pops/getStand', 
			url: '/x/web-interface/online'
		}
		this.$store.dispatch('global/request', params);
	}
}
</script>

<style scoped lang="less">
.stand{
	padding: 10px 5px;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	width: 670px;
	height: 372px;
	display: flex;
	.stand-left{
		flex: 2;
		border-right: 1px solid #e7e7e7;
	}
	.stand-right{
		flex: 1;
		padding-left: 5px;
	}
	.stand-left, .stand-right{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		.item{
			display: flex;
			width: 172px;
			height: 24px;
			line-height: 24px;
			padding: 10px 20px !important;
			color: #212121;
			border-radius: 4px;
			transition: all 0.3s;
			font-size: 14px;
			justify-content: space-between;
			box-sizing: content-box;
			cursor: pointer;
			.text{
				display: flex;
				font-size: 14px;
				line-height: 24px;
				.icon-box{
					padding-right: 10px;
					width: 20px;
					font-size: 16px;
					color: #00A1D6;
				}
			}
			.num{
				color: var(--c9);
				font-size: 14px;
			}
		}
	}
}
</style>
